<template>
	<view class="active">
		<!-- 新品上市 -->
		<view class="new">
			<image src="https://oss.microzuji.com/web/activity/new_product/z1.png" mode="widthFix" class="new-image" lazy-load="true"></image>
		</view>
		<!-- 01贴图的盒子部分 -->
		<view class="box">
		</view>
		<!-- 商品 -->
		<view class="goodlist">
			<!-- 商品头部 -->
			<view class="goods-top" @tap="goProduct" :data-id="product.itemId" >
				<view class="text-left" >
					<view class="newPing-tit">
						新品
					</view>
					<view class="title">
						{{product.name}}
					</view>
					<view class="label">
						{{product.labels[0]}}
						{{product.labels[1]}}
					</view>
					<view class="price mt10">
						￥<text style="font-size: 28rpx;font-weight: bold;"> {{product.price}} </text>/日起
						<text class="price-box ml20 mt30">
							立即下单
						</text>
					</view>
				</view>
				<view class="image-right">
					<image :src="product.image" mode="scaleToFill" style="width: 310rpx;height: 260rpx;"
						lazy-load="true"></image>
				</view>
			</view>
		</view>
		<view class="line">
			<view class="goodlist">
				<view class="free">
				</view>
				<!-- 商品列表 -->
				<view class="goods">
					<view class="goods-item" v-for="(item,index) in productList" @tap="goProduct"
						:data-id="item.itemId">
						<view class="new-goods">
							新品
						</view>
						<image :src="item.image" mode="widthFix" class="goods-image"></image>
						<view class="title">{{item.name}}</view>
						<view class="label">
							{{item.labels[0]}} . {{item.labels[1]}}
						</view>
						<view class="price dayPrice">
							{{item.price}}/日起
						</view>
					</view>
				</view>
			</view>
			<!-- 更多 -->
			<view class="more" @tap="goMore">
				<image src="https://oss.microzuji.com/web/activity/new_product/z2.png" mode="widthFix" class="morepic"></image>
			</view>
			<!-- 设置 -->
			<view class="set">
				<image src="https://oss.microzuji.com/web/activity/new_product/t1.png" mode="widthFix" class="setpic"></image>
			</view>
			<!-- 我的 -->
			<view class="my">
				<view class="my-text"> 用心服务 | 品质保证 | 售后无忧 </view>
				<view class="image-content" @tap="goTop">
					<image src="https://oss.microzuji.com/web/activity/new_product/z3.png" class="my-image" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				product: null,
				productList: [],
			}
		},
		methods: {
			// 获取手机信息
			getActive() {
				this.$request(
					"hzsx/aliPay/index/getPromotionInfoById?id=1"
				).then((res) => {
					if (res.httpStatus == 200) {
						const tabList = res.data.info.tabList
						this.product = tabList[0].productList[0]
						this.productList = tabList[1].productList.map((item) => {
							return item
						})
						console.log(this.productList, "this.productList")
					}
				})
			},
			// 返回顶部
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration: 300 // 滚动动画的时长
				})
			},
			// 去详情页
			goProduct(e) {
				this.$onTo(
					`/pages/product/product?productId=${e.target.dataset.id}`
				)
			},
			// 去更多
			goMore() {
				this.$onTo(
					`/pages/index/index`
				)
			}
		},
		onLoad() {
			this.getActive()
		}
	}
</script>


<style>
	page{
			background-color:#321984;
		}
	.box {
		margin-top: -100rpx;
		margin-bottom: -160rpx;
		/* 	border: 1rpx solid red; */
		background-image: url("https://oss.microzuji.com/web/activity/new_product/tie-tu2.png");
		height: 200rpx;
		width: 100%;
		background-size: 100% auto;
		/* 	width: 100%;
		height: 400rpx; */
	}
	.line {
		margin-top: -130rpx;
		/* margin-bottom: -160rpx; */
		/* 	border: 1rpx solid ; */
		background-image: url("https://oss.microzuji.com/web/activity/new_product/tie-tu1.png");
		background-size: 100% 100%;
	}
	.free {
		height: 60rpx;
	}
	.price-box{
		font-weight: 600;
		color: white;
		padding: 5rpx 20rpx;
		font-size: 26rpx;
		background: url("https://oss.microzuji.com/web/activity/new_product/A1.png") center center/100% 100% no-repeat;
	}
	.new-goods{
		padding-left: 15rpx;
		padding-right: 15rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		border: 3rpx solid #9A3443;
		color: #9A3443;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
	}
	.dayPrice{
		font-weight: 600;
		color: white;
		padding: 8rpx 3rpx;
		font-size: 28rpx;
		background: url("https://oss.microzuji.com/web/activity/new_product/A2.png") center center/100% 100% no-repeat;
	}
</style>
<style lang="scss" scoped>
	.active {
		width: 100%;
		background-image: url("https://oss.microzuji.com/web/activity/new_product/bei-jing.png"), url("https://oss.microzuji.com/web/activity/new_product/bj.png"), url("https://oss.microzuji.com/web/activity/new_product/bj.png");
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-size: contain, contain, contain;
		background-position: top, center, bottom;
		padding-top: 920rpx;
		padding-bottom: 100rpx;
		box-sizing: border-box;

		.new {
			background: url("https://oss.microzuji.com/web/activity/new_product/d1.png") center center/100% 100% no-repeat;
			// background-image: url("@/static/image/d1.png");
			// background-size: 100% 100%;
			// width: 100%;
			// height: 150rpx;
			margin-top: 32rpx;
			margin-bottom: 90rpx;

			.new-image {
				margin-top: 20rpx;
				margin-left: 250rpx;
				width: 270rpx;
				height: 50rpx;
			}
		}

		.goodlist {
			margin-top: 70rpx;
			margin-bottom: 80rpx;
			padding: 0 28rpx;

			.goods-top {
				width: 700rpx;
				height: 452rpx;
				background-image: url("https://oss.microzuji.com/web/activity/new_product/k4.png");
				background-size: 100% 100%;
				display: flex;
				position: relative;

				.newPing-tit {
					padding-left: 15rpx;
					padding-right: 15rpx;
					font-size: 24rpx;
					border-radius: 8rpx;
					border: 3rpx solid #9A3443;
					color: #9A3443;
					position: absolute;
					top: 110rpx;
				}

				.text-left {
					margin-top: 130rpx;
					padding-left: 36rpx;
					width: 60%;
					font-family: '微软雅黑';
					color: #333333;

					.title {
						margin-top: 20rpx;
						margin-bottom: 24rpx;
						font-size: 28rpx;
						font-weight: bold;
					}

					.label {
						margin-bottom: 28rpx;
						font-size: 24rpx;
					}

					.price {
						font-size: 20rpx;
					}

					.order {
						position: absolute;
						left: 2rem;
						bottom: 0.89rem;

						.order-image {
							width: 136rpx;
							height: 42rpx;
						}
					}
				}

				.image-right {
					margin-top: 120rpx;
					width: 50%;
					margin-right: 50rpx;
				}

			}

			.goods {
				width: 700rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;

				.goods-item {
					width: 340rpx;
					height: 460rpx;
					margin-top: 35rpx;
					background-image: url("https://oss.microzuji.com/web/activity/new_product/k2.png");
					background-size: 100% 100%;
					position: relative;

					.goods-image {
						margin-top: 60rpx;
						text-align: center;
						margin-left: 70rpx;
						width: 190rpx;
						height: 140rpx;
					}

					.title {
						width: 300rpx;
						height: 30rpx;
						margin-left: 19rpx;
						font-size: 26rpx;
						font-weight: bold;
						text-align: center;
						overflow: hidden;
						// white-space:nowrap; 
						// overflow:hidden; 
						// text-overflow:ellipsis;
					}

					.label {
						text-align: center;
						font-size: 24rpx;
						margin-top: 10rpx;
					}

					.price {
						position: absolute;
						bottom: 0.78rem;
						left: 0.8rem;
						color: #f9fffc;
						font-size: 0.24rem;
						font-weight: bolder;
						font-family: 锐字奥运精神夺冠简, 黑体, sans-serif;
						width: 1.8rem;
						text-align: center;
					}
				}
			}
		}

		.more {
			// background-color: pink;
			width: 100%;
			height: 150rpx;
			margin: 0 auto;
			background-image: url("https://oss.microzuji.com/web/activity/new_product/d1.png");
			background-size: 100% 100%;

			.morepic {
				margin-top: 50rpx;
				margin-left: 250rpx;
				width: 270rpx;
				height: 60rpx;
			}
		}

		.set {
			margin: 90rpx 0 160rpx;
			padding: 0 10rpx;

			.setpic {
				width: 680rpx;
				margin-left: 25rpx;
			}

		}

		.my {
			width: 60%;
			height: 200rpx;
			margin: 0 auto;

			.my-text {
				font-size: 30rpx;
				color: #fff;
				font-weight: 700;
				text-align: center;
			}

			.image-content {
				width: 260rpx;
				margin: 0 auto;

				.my-image {
					margin-top: 50rpx;
					width: 260rpx;
					height: 76rpx;
				}
			}

		}
	}
</style>
